<template>
    <div style="border: 1px solid #ccc;">
        <Toolbar
                style="border-bottom: 1px solid #ccc"
                :editor="editor"
                :defaultConfig="toolbarConfig"
                :mode="mode"
        />
        <Editor
                style="height: 400px; overflow-y: hidden;"
                v-model="html"
                @onChange="onChange"
                :defaultConfig="editorConfig"
                :mode="mode"
                @onCreated="onCreated"
        />
    </div>
</template>

<style src="../../node_modules/@wangeditor/editor/dist/css/style.css"></style>
<script>
    import Vue from 'vue'
    import {Editor, Toolbar} from '@wangeditor/editor-for-vue'
    export default {
        name: "wangEditor",
        components: {Editor, Toolbar},
        props: {
            value: {
                type: String,
                default: ""
            }
        },
        data() {
            return {
                html: "",
                editor: null,
                toolbarConfig: {},
                editorConfig: {
                    placeholder: '请输入内容...',
                    MENU_CONF: {
                        server: process.env.VUE_APP_UPLOADFILE + '/common/uploadFile',
                    }
                },
                mode: 'default', // or 'simple'
            }
        },
        methods: {
            onCreated(editor) {
                this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错

                var uiConfig = editor.getMenuConfig('uploadImage')
                uiConfig.server = process.env.VUE_APP_UPLOADFILE + '/common/uploadFile'
                uiConfig.fieldName = 'file'

                uiConfig.customInsert = (res, insertFn) => {
                    var url = res.result
                    this.$api.getPreviewUrl({path: url}).then(res => {
                        insertFn(res, "", res)
                    })
                }

                var videoConfig = editor.getMenuConfig('uploadVideo')
                videoConfig.server = process.env.VUE_APP_UPLOADFILE + '/common/uploadFile'
                videoConfig.maxFileSize = 300 * 1024 * 1024
                videoConfig.fieldName = 'file'
                videoConfig.customInsert = (res, insertFn) => {
                    var url = res.result
                    this.$api.getPreviewUrl({path: url}).then(res => {
                        insertFn(res)
                    })
                }
                this.html = this.value
            },
            onChange(editor) {
                var html = editor.getHtml()
                this.$emit('input', editor.getHtml())
            },
        },
        watch: {
            value: {
               handler(val){
                   this.html = val ? val : ''
               },
                deep:true
            },
        },
        mounted() {
        },
        beforeDestroy() {
            const editor = this.editor
            if (editor == null) return
            editor.destroy() // 组件销毁时，及时销毁编辑器
        }
    }
</script>

<style scoped>

</style>
